<template>
  <div class="big">
     <div class="dog">
          
     </div>
   <p :style="{backgroundColor:changeColor}" @click="btn">这是一个孤独的狗</p>
  </div>
</template>

<script>
export default {
    data(){
        return {
            changeColor:''
        }
    },
    methods:{
        btn(){
            this.changeColor=`rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
        }
    }
}
</script>

<style>
body {
    background-color: rgb(92, 177, 247);
}
*{
    padding: 0;
    margin: 0;
}
    .big {
         float: left;
        width: 200px;
        height: 300px;
        border: 1px solid #000;
        text-align: center;
        
    }
    .dog{
       
        width: 100%;
        height: 250px;
        background: url('../assets/1.jpg') no-repeat center ;
        margin-bottom: 10px;

    }
</style>